{extend name="public:head"}
{block name="main"}

<div style="margin-top: 50px">

    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">进来的单期流量(未注册)</h2>
            <div class="layui-colla-content"><ul class="layui-timeline">
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">今天 : <span id="today_d"></span></h3>
            <p>
                <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-filter="today_d" lay-showPercent="true" >
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </p>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">昨天 : <span id="yesterday_d"></span></h3>
            <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="yesterday_d">
                <div class="layui-progress-bar layui-bg-orange" lay-percent=""></div>
            </div>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">本周 : <span id="lastWeek_d"></span></h3>
            <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastWeek_d">
                <div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
            </div>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">本月 : <span id="lastMonth_d"></span></h3>
            <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastMonth_d">
                <div class="layui-progress-bar layui-bg-black" lay-percent=""></div>
            </div>
        </div>
    </li>
            </ul></div>
        </div>
    </div>
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">进来的分期流量(未注册)</h2>
            <div class="layui-colla-content"><ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">今天 : <span id="today_f"></span></h3>
                        <p>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-filter="today_f" lay-showPercent="true" >
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">昨天 : <span id="yesterday_f"></span></h3>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="yesterday_f">
                            <div class="layui-progress-bar layui-bg-orange" lay-percent=""></div>
                        </div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">本周 : <span id="lastWeek_f"></span></h3>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastWeek_f">
                            <div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
                        </div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">本月 : <span id="lastMonth_f"></span></h3>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastMonth_f">
                            <div class="layui-progress-bar layui-bg-black" lay-percent=""></div>
                        </div>
                    </div>
                </li>
            </ul></div>
        </div>
    </div>

    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">已注册单期流量</h2>
            <div class="layui-colla-content"><ul class="layui-timeline">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">今天 : <span id="todayHas_d"></span></h3>
                <p>
                <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-filter="todayHas_d" lay-showPercent="true" >
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">昨天 : <span id="yesterdayHas_d"></span></h3>
                <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="yesterdayHas_d">
                    <div class="layui-progress-bar layui-bg-orange" lay-percent=""></div>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">本周 : <span id="lastWeekHas_d"></span></h3>
                <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastWeekHas_d">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">本月 : <span id="lastMonthHas_d"></span></h3>
                <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastMonthHas_d">
                    <div class="layui-progress-bar layui-bg-black" lay-percent=""></div>
                </div>
            </div>
        </li>
    </ul></div>
        </div>
    </div>
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">已注册分期流量</h2>
            <div class="layui-colla-content"><ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">今天 : <span id="todayHas_f"></span></h3>
                        <p>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-filter="todayHas_f" lay-showPercent="true" >
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">昨天 : <span id="yesterdayHas_f"></span></h3>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="yesterdayHas_f">
                            <div class="layui-progress-bar layui-bg-orange" lay-percent=""></div>
                        </div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">本周 : <span id="lastWeekHas_f"></span></h3>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastWeekHas_f">
                            <div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
                        </div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">本月 : <span id="lastMonthHas_f"></span></h3>
                        <div style="margin: 10px 0" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="lastMonthHas_f">
                            <div class="layui-progress-bar layui-bg-black" lay-percent=""></div>
                        </div>
                    </div>
                </li>
            </ul></div>
        </div>
    </div>


    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">每个标识流量</h2>
            <div class="layui-colla-content"><table id="sign_1" lay-filter="test"></table></div>
        </div>
    </div>

    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">每个标识注册量</h2>
            <div class="layui-colla-content"><table id="sign_2" lay-filter="test"></table></div>
        </div>
    </div>

</div>


<script>
    layui.use(['layer','element','table'], function(){
        var element = layui.element;
        var table = layui.table;
        var tokenValue = layui.data('cache');

        $.ajax({
            url:"/getMonthData?time=add_time&model=Popularize",
            type:"post",
            headers:{"token":tokenValue.token},
            dataType:"json",
            success:function (res) {
                console.log(res.d)
                // 单期
                element.progress('today_d', res.d.today)
                element.progress('yesterday_d', res.d.yesterday)
                element.progress('lastWeek_d', res.d.lastWeek)
                element.progress('lastMonth_d', res.d.lastMonth)
                $("#today_d").html(res.d.today)
                $("#yesterday_d").html(res.d.yesterday)
                $("#lastWeek_d").html(res.d.lastWeek)
                $("#lastMonth_d").html(res.d.lastMonth)
                // 单期
                element.progress('today_f', res.f.today)
                element.progress('yesterday_f', res.f.yesterday)
                element.progress('lastWeek_f', res.f.lastWeek)
                element.progress('lastMonth_f', res.f.lastMonth)
                $("#today_f").html(res.f.today)
                $("#yesterday_f").html(res.f.yesterday)
                $("#lastWeek_f").html(res.f.lastWeek)
                $("#lastMonth_f").html(res.f.lastMonth)
            }
        })
        $.ajax({
            url:"/getMonthData?time=registered_time&model=Registered",
            type:"post",
            headers:{"token":tokenValue.token},
            dataType:"json",
            success:function (res) {
                console.log(res.today)
                element.progress('todayHas_d', res.d.today)
                element.progress('yesterdayHas_d', res.d.yesterday)
                element.progress('lastWeekHas_d', res.d.lastWeek)
                element.progress('lastMonthHas_d', res.d.lastMonth)
                $("#todayHas_d").html(res.d.today)
                $("#yesterdayHas_d").html(res.d.yesterday)
                $("#lastWeekHas_d").html(res.d.lastWeek)
                $("#lastMonthHas_d").html(res.d.lastMonth)

                element.progress('todayHas_f', res.f.today)
                element.progress('yesterdayHas_f', res.f.yesterday)
                element.progress('lastWeekHas_f', res.f.lastWeek)
                element.progress('lastMonthHas_f', res.f.lastMonth)
                $("#todayHas_f").html(res.today)
                $("#yesterdayHas_f").html(res.f.yesterday)
                $("#lastWeekHas_f").html(res.f.lastWeek)
                $("#lastMonthHas_f").html(res.f.lastMonth)
            }
        })

        table.render({
            elem: '#sign_1'
            ,height: 312
            ,toolbar: true
            ,url: '/login/Statistics/getSignWeek?time=add_time&model=Popularize' //数据接口
            ,headers: {"token":tokenValue.token}
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'sign', title: '标识码', width:250}
                ,{field: 'today', title: '今天推广量',sort: true, width:250}
                ,{field: 'yesterday', title: '昨天推广量', sort: true, width:250}
                ,{field: 'lastWeek', title: '本周推广',sort: true, width:250}
            ]]
        });
        table.render({
            elem: '#sign_2'
            ,height: 312
            ,toolbar: true
            ,url: '/login/Statistics/getSignWeek?time=registered_time&model=Registered' //数据接口
            ,headers: {"token":tokenValue.token}
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'sign', title: '标识码', width:250}
                ,{field: 'today', title: '今天注册量',sort: true, width:250}
                ,{field: 'yesterday', title: '昨天注册量', sort: true, width:250}
                ,{field: 'lastWeek', title: '本周注册',sort: true, width:250}
            ]]
        });

    })
    </script>

{/block}